<template>
  <div class="artistinfo">
    <!-- 左侧歌单大图 -->
    <div class="musicBox">
      <el-image
        style="width: 180px; height: 180px"
        :src="coverImgUrl"
        fit="fill"
      ></el-image>
      <div class="plate"></div>
    </div>

    <!-- 右侧歌单详情信息 -->
    <div class="detail">
      <div class="detail_name">
        <div>专辑</div>
        {{ albumName }} &ensp;
      </div>

      <div class="detail_operate">
        <el-button
          round
          size="medium"
          icon="el-icon-caret-right"
          type="danger"
          v-remove-focus
          >播放全部 <i class="el-icon-plus"></i
        ></el-button>
        <el-button round size="medium" icon="el-icon-folder-add" v-remove-focus
          >收藏({{ subCount }})</el-button
        >
        <el-button round size="medium" icon="el-icon-download" v-remove-focus
          >下载全部</el-button
        >
        <el-button round size="medium" icon="el-icon-share" v-remove-focus
          >分享({{ shareCount }})</el-button
        >
      </div>
      <div class="detail_artistName" @click="toSongerDetailPage(artistId)">
        歌手 : <span> {{ artistName }}</span>
      </div>

      <div class="detail_pubTime">
        时间 : <span>{{ pubTime | dateFormat }} </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'artistinfo',
  data() {
    return {
      pubTime: '',
      artistId: '',
      subCount: '',
      albumName: '',
      artistName: '',
      shareCount: '',
      coverImgUrl: '',
    }
  },
  computed: {
    ...mapState(['albumlistId']),
  },
  created() {},
  mounted() {
    this.getDigitalAlbumDetail(this.albumlistId)
    this.getSonglistDetail(this.albumlistId)
  },
  methods: {
    ...mapMutations(['changePath', 'changeSongerId']),

    // 获取数字专辑详情信息
    async getDigitalAlbumDetail(albumlistId) {
      const { data: res } = await this.$http({
        url: `/album?id=${albumlistId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.pubTime = res.album.publishTime
      this.artistId = res.album.artist.id
      this.albumName = res.album.name
      this.artistName = res.album.artist.name
      this.coverImgUrl = res.album.picUrl
    },
    // 获取专辑动态信息
    async getSonglistDetail(albumlistId) {
      const { data: res } = await this.$http({
        url: `/album/detail/dynamic?id=${albumlistId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.subCount = res.subCount
      this.shareCount = res.shareCount
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)

      this.$emit('getSongerDetailInfo')
    },
  },
}
</script>


<style lang="less" scoped>
.artistinfo {
  overflow: auto;
  display: flex;
}

.musicBox {
  position: relative;
  margin: 24px 52px 24px 24px;
  .el-image {
    border-radius: 8px;
    box-shadow: 10px 0px 6px rgba(65, 65, 65, 0.247);
  }
  .plate {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: black;
    top: 0;
    z-index: -2;
    right: -26px;
  }
}

.detail {
  margin: 24px 0;
  > .detail_name {
    display: flex;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 8px;

    > div {
      border: 1px solid red;
      height: 18px;
      font-size: 13px;
      font-weight: normal;
      padding: 0px 3px 1px 3px;
      border-radius: 4px;
      color: red;
      position: relative;
      top: 8px;
      margin-right: 8px;
    }
  }

  > .detail_operate {
    margin-bottom: 18px;
    /deep/ .el-button--medium.is-round {
      padding: 6px 10px;
    }
    /deep/ i {
      font-size: 20px;
    }
    /deep/ span {
      position: relative;
      top: -3px;
    }
    /deep/ .el-icon-plus {
      position: relative;
      top: 3px;
    }
  }
  > .detail_artistName {
    font-size: 14px;
    margin-bottom: 8px;
    color: #768181;
    cursor: pointer;
    > span {
      color: #0b7ccb;
      margin-left: 5px;
    }
  }

  > .detail_pubTime {
    font-size: 14px;
    color: #768181;
    > span {
      margin-left: 5px;
    }
  }
}
</style>